<template>
  <div class="page">
    <div class="main-title">
      <span>领券中心</span>
      <!-- <b @click="$router.push('/mycoupon')">我的优惠券</b> -->
    </div>

    <div class="page-ctx">
      <div class="inner">
        <!-- <div class="yhq-list" v-if="list_yhq.length">
          <div class="yhq-item" v-for="(item, index) in list_yhq" :key="index">
            <div class="yhq-left">
              <img :src="item.originalPic" alt="" />
            </div>
            <div class="yhq-right">
              <div class="money">
                <div class="currency">{{ vuex_huobi }}</div>
                <div class="num">{{ item.money }}</div>
              </div>
              <div class="tiaojian">使用条件： 满{{ item.man }}可用</div>
              <div class="shijian">
                有效时间： {{ item.startTime }} - {{ item.endTime }}
              </div>
              <div class="action">
                <button class="btn-ripple btn-pick btn-lingqu" v-if="item.if_ke_lingqu == 1" @click="coupon_pick(item)">
                  立即领取
                </button>
                <button class="btn-ripple btn-pick btn-yilingqu" disabled v-else>
                  已领取
                </button>
              </div>
            </div>
          </div>
        </div> -->

        <div class="list-box">
          <div class="item" :class="'state-' + status" v-for="(item, index) in list_yhq" :key="index">
            <div class="info">
                <div class="title">
                  <span class="huobi">{{ vuex_huobi }} </span>
                  <span class="num">{{ item.couponName }}</span>
                </div>
                <!-- <div class="tiaojian">
                  满{{ item.man }}可用
                </div>
                <div class="shijian">
                  {{ item.startTime }}-{{ item.endTime }}
                </div> -->
              </div>
              <div class="text-num">
                <div>使用条件：{{ item.remark }}</div>
                <div>有效时间：{{ item.expireDate }}</div>
              </div>
              <div class="action">
                <button  @click="do_coupon_use(item)">立即使用</button>
              </div>
              <div class="guoqi">
                <!-- <img v-if="item.status == 0" src="@img/coupon/jijiangguoqi.png" alt /> -->
                <!-- <img v-if="item.status == 1" src="@img/coupon/yiguoqi.png" alt /> -->
                <!-- <img v-if="item.status == 2" src="@img/coupon/yishiyong.png" alt /> -->
              </div>
          </div>
        </div>

        <div class="pagination-box" style="margin-top: 40px;text-align: right;">
            <el-pagination background layout="total, prev, pager, next" @current-change="mix_current_change"
              :current-page.sync="pagination.page" :page-size="pagination.pageNum" :total="count"></el-pagination>
          </div>


        <el-empty v-if="!list_yhq.length" description="暂无优惠券信息..."></el-empty>

        <!-- <div class="bg-box">
          <img src="@img/my/bg-coupon.png" alt="" />
        </div> -->

        <!-- <div class="tab-box">
        <div
          class="tab-item"
          v-for="(item, index) in list_tab"
          :key="index"
          @click="status = item.status"
          :class="status == item.status ? 'active' : ''"
        >
          {{ item.title }}
        </div>
      </div> -->


        <!-- <el-empty v-if="!list_yhq.length" description="暂无优惠券信息..."></el-empty> -->

        <!-- <div class="lingquan" @click="$router.push('/mycoupon')">
        <img src="@img/other/mycoupon-to-center.png" alt="" />
        <span>我的优惠券 ></span>
      </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from "vuex";

export default {
  name: "servicePage",
  components: {},
  data() {
    return {
      status: 1,
      //0全部 1未使用 2已使用 3已过期
      list_tab: [
        // { title: "全部", status: 0 },
        // { title: "未使用", status: 1 },
        // { title: "已使用", status: 2 },
        // { title: "已过期", status: 3 },
      ],

      list_yhq: [],

      pagination: {
        page: 1,
        pageNum: 10,
      },
      count: 0
    };
  },
  computed: {
    // ...mapState([""]),
  },
  created() {
    this.setView();
  },
  methods: {
    setView() {
      this.$httpApi("/api/v1/index/coupon/list", { },'get').then((res) => {
        if (res.code == 200) {
          let data = res.data;
          this.list_yhq = res.rows;
          this.count = res.total;
        }
      });
    },
    do_coupon_use(item){
      this.$httpApi("/api/v1/purchaser/receive/coupon/"+item.couponId, { },'get').then((res) => {
        if (res.code == 200) {
          alertSucc('领取成功');
        }else {
          alertErr(res.msg);
        }
      });
    },
    do_coupon_pick(item) {
      this.$api({
        url: '/service.php',
        method: 'get',
        data: {
          action: 'yhq_lingQu',
          id: item.id,
        },
      }).then((res) => {
        alert(res)
        if (res.code == 200) {
          this.setView();
        }
      });
    },
  },
};
</script>

<style scoped lang="less">
.page {
  text-align: left;
  padding-bottom: 80px;

  .main-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 0 32px;
    text-align: left;
    height: 56px;
    line-height: 56px;
    background: #ffffff;
    font-size: 16px;
    font-family: Microsoft YaHei-Bold, Microsoft YaHei;
    font-weight: bold;
    color: #333333;

    button {
      min-width: 96px;
      height: 30px;
      line-height: 30px;
      background: #009F39;
      color: #fff;
      font-size: 14px;
      font-weight: bold;
    }
  }

  .page-ctx {
    min-height: 400px;
    margin-top: 24px;
    padding: 24px 32px 40px 32px;
    background: #fff;
  }
}

.inner {
  padding-bottom: 80px;

  .bg-box {
    margin-bottom: 30px;

    img {
      max-width: 100%;
    }
  }

  .tab-box {
    margin-bottom: 30px;
    display: flex;
    align-items: center;

    .tab-item {
      cursor: pointer;
      padding-bottom: 5px;
      border-bottom: 3px solid transparent;
      margin-right: 50px;

      &.active {
        border-bottom: 3px solid #ff9312;
      }
    }
  }

  .list-box {
    display: flex;
    align-items: center;
    flex-wrap: wrap;

    .item {
      position: relative;
      background: url(~@img/other/mycoupon-bg.png) center / cover no-repeat;
      width: 214px;
      height: 268px;
      margin-right: 12px;
      margin-bottom: 11px;
      color: #999999;

      &.state-2 {
        background: url(~@img/coupon/bg-yishiyong.png) center / cover no-repeat;
      }

      &.state-3 {
        background: url(~@img/coupon/bg-yiguoqi.png) center / cover no-repeat;
      }

      &:nth-child(4n) {
        margin-right: 0;
      }

      .info {
        font-size: 12px;
        font-family: Microsoft YaHei;
        font-weight: 400;
        line-height: 20px;
        color: #ffffff;

        .title {
          height: 115px;
          text-align: center;

          .huobi {
            font-size: 24px;
            font-family: Microsoft YaHei;
            font-weight: 400;
            line-height: 115px;
            color: #ffffff;
          }

          .num {
            font-size: 48px;
            font-family: Microsoft YaHei;
            font-weight: bold;
            line-height: 115px;
            color: #ffffff;
          }
        }

        

        .tiaojian {
          margin: 20px 0 10px;
        }

        .shijian {}
      }

      .text-num{
          font-weight: 400;
          font-size: 12px;
          color: #999999;
          line-height: 24px;
          padding:10px 10px;
        }

      .action {
        margin-top: 20px;
        text-align: center;

        button {
          width: 127px;
          height: 37px;
          border: 1px solid #EF1F1F;;
          background: transparent;
          font-size: 14px;
          font-family: Microsoft YaHei;
          font-weight: 400;
          line-height: 20px;
          color: #EF1F1F;
          border-radius: 4px;

          // &:hover {
          //   background: #ff3d00;
          //   color: #fff;
          // }

          &:disabled {
            opacity: 0.3;
            cursor: not-allowed;
          }
        }
      }

      .guoqi {
        position: absolute;
        bottom: 0;
        right: 0;

        img {
          width: 60px;
          vertical-align: bottom;
        }
      }
    }
  }
}

.lingquan {
  display: flex;
  align-items: center;
  cursor: pointer;
  width: fit-content;
  cursor: pointer;

  img {
    width: 25px;
  }

  span {
    margin-left: 10px;
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 400;
    line-height: 36px;
    color: #eb5d53;
  }
}

.yhq-list {
  .yhq-item {
    display: flex;
    align-items: center;
    margin-bottom: 30px;

    .yhq-left {
      width: 786px;
      height: 252px;

      img {
        width: 100%;
        height: 100%;
      }
    }

    .yhq-right {
      flex: 1;
      height: 252px;
      padding: 20px;
      background: #f9f9f9;

      .money {
        display: flex;
        align-items: flex-start;

        .currency {
          font-size: 42px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: bold;
          color: #009F39;
        }

        .num {
          font-size: 42px;
          font-family: Microsoft YaHei-Bold, Microsoft YaHei;
          font-weight: bold;
          color: #009F39;
        }
      }

      .tiaojian {
        margin-top: 10px;
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        line-height: 28px;
      }

      .shijian {
        font-size: 12px;
        font-family: Microsoft YaHei-Regular, Microsoft YaHei;
        font-weight: 400;
        color: #999999;
        line-height: 28px;
      }

      .action {
        margin-top: 30px;

        button {
          width: 127px;
          height: 36px;
          background: #009F39;
          border-radius: 4px 4px 4px 4px;
          font-size: 14px;
          font-family: Microsoft YaHei-Regular, Microsoft YaHei;
          font-weight: 400;
          color: #ffffff;

          &:disabled {
            background: #aaa;
            cursor: not-allowed;
          }
        }
      }
    }
  }
}
</style>

<style scoped lang="less" src="@/assets/h5css/user/couponCenter.less"></style>
